import { UploadOutlined } from "@ant-design/icons";
import { Button, Card, Form, Input, Upload, Select } from "antd";
import { useCallback } from "react";
import { useState } from "react";
import { POST_SCRIPT } from "../../api/scripts";
import WEditor from "../../components/Editor";

function ScriptCreate() {
  let submit = async (values) => {
    values.type = values.type.join("、")
    values.url = values.url[0].response.imgUrl || ""
    console.log(values);

    let res = await POST_SCRIPT(values)
    console.log(res);
  }



  let [fileList, setFileList] = useState([])
  const props = {
    name: 'file',//name得看接口需求，name与接口需要的name一致
    action: 'http://localhost:3333/api/uploadimg',//接口路径
    // data: {},//接口需要的参数，无参数可以不写
    multiple: true,//支持多个文件
    showUploadList: true,//展示文件列表
  }
  let onChange = useCallback(({ file, fileList, event }) => {
    // console.log('file', fileList[0]);
    if (fileList[0].response) {
      console.log('file', fileList[0]);
      // let _imgUrl = imgUrl
      // _imgUrl.push(fileList[0].response.imgUrl)
      setFileList(fileList[0].response.imgUrl);
    }
  }, [])

  return (
    <Card>
      <Form onFinish={submit}>
        <Form.Item name="url" label="图片" valuePropName="fileList"
          // 如果没有下面这一句会报错.
          // 直接使用antd Form组件里面的getValueFromEvent方法，这个方法的作用就是把onChange的参数回传到Upload里面(这里的参数就是file和fileList)。
          getValueFromEvent={e => {
            if (Array.isArray(e)) {
              return e;
            }
            return e && e.fileList;
          }}>
          <Upload {...props}
            fileList={fileList}
            onChange={onChange}
          >
            <Button icon={<UploadOutlined />}>上传图片</Button>
          </Upload>
        </Form.Item>
        <Form.Item name="title" label="标题">
          <Input placeholder="请输入标题!"></Input>
        </Form.Item>
        <Form.Item name="content" label="内容">
          <WEditor></WEditor>
        </Form.Item>
        <Form.Item label="类型" name="type">
          <Select
            mode="multiple"
            allowClear
            options={[
              {
                label: "城限",
                value: "城限"
              },
              {
                value: "情感",
                label: "情感"
              },
              {
                value: "现代",
                label: "现代"
              },
              {
                value: "立意",
                label: "立意"
              },
              {
                value: "本格",
                label: "本格"
              },
              {
                value: "惊悚",
                label: "惊悚"
              },
            ]}
          />
        </Form.Item>
        <Form.Item>
          <Button htmlType="submit">添加</Button>
        </Form.Item>
      </Form>
    </Card>
  );
}

export default ScriptCreate;